<template>
	<page-meta :root-font-size="myFontsize+'px'"></page-meta>
	<view class="content">
		<view>
			<image class="logo" src="@/static/logo.png"></image>
		</view>
		
		<view v-if="checkRole(['admin','manager'])" class="menu">
			<uni-row :gutter="gutter" class="menu-item">
				<uni-col :span="12"><button class="menu-item-box" @click="handleLesson">课时</button></uni-col>
				<uni-col :span="12"><button class="menu-item-box" @click="handleStudent">学生信息</button></uni-col>
			</uni-row>
			<uni-row :gutter="gutter" class="menu-item">
				<uni-col :span="12"><button class="menu-item-box" @click="handleCoach">教练</button></uni-col>
				<uni-col :span="12"><button class="menu-item-box" @click="handleRollCall">教练点名</button></uni-col>
			</uni-row>
			<uni-row :gutter="gutter" class="menu-item">
				<uni-col :span="12"><button class="menu-item-box" @click="handleStrengthTest">体能指标</button></uni-col>
				<uni-col :span="12"><button class="menu-item-box" @click="handleMemberIntegral">积分登记</button></uni-col>
			</uni-row>
			<uni-row :gutter="gutter" class="menu-item">
				<uni-col :span="12"><button class="menu-item-box">网站入口</button></uni-col>
				<uni-col :span="12"><button class="menu-item-box" @click="handleNews">赛事积分</button></uni-col>
			</uni-row>
		</view>
		<view v-else-if="checkRole(['outside','parent','student'])">
			<uni-row :gutter="gutter" v-if="checkRole(['parent','student'])">
				<uni-col><button class="menu-item-box" @click="handleStudent">学生信息</button></uni-col>
			</uni-row>
			<uni-row :gutter="gutter">
				<uni-col><button class="menu-item-box" @click="handleNews">赛事积分</button></uni-col>
			</uni-row>
		</view>
		<view v-else-if="checkRole(['coach'])">
			<uni-row :gutter="gutter" class="menu-item">
				<uni-col :offset="6"><button class="menu-item-box" @click="handleRollCall">教练点名</button></uni-col>
			</uni-row>
			<uni-row :gutter="gutter" class="menu-item">
				<uni-col :span="12"><button class="menu-item-box" @click="handleStrengthTest">体能指标</button></uni-col>
				<uni-col :span="12"><button class="menu-item-box" @click="handleIntegral">积分登记</button></uni-col>
			</uni-row>
			<uni-row :gutter="gutter" class="menu-item">
				<uni-col :offset="6"><button class="menu-item-box" @click="handleNews">赛事积分</button></uni-col>
			</uni-row>
			<uni-row :gutter="gutter" class="menu-item">
				<uni-col :offset="6"><button class="menu-item-box" @click="handleCoach">教练</button></uni-col>
			</uni-row>
		</view>
		<view class="slogan">
			<view class="slogan-name">
				阿邱羽毛球体能训练中心
			</view>
			<view class="line">
			</view>
			<view class="slogan-style">
				力量 速度 感统 协调
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数
	import { getUserProfile } from "@/api/system/user.js";

	export default {
    data() {
      return {
				myFontsize: this.$store.state.user.my_fontsize,
				gutter: 20,
      }
    },
		onLoad: function() {
			this.getUserProfileInfo();
		},
		methods: {
			checkPermi,
			checkRole,
			getUserProfileInfo() {
				getUserProfile().then(response => {
					// console.log(response);
				});
			},
			handleRollCall() {
				this.$tab.navigateTo("/pages/puyu/lesson/index");
			},
			handleStrengthTest() {
				this.$tab.navigateTo("/pages/puyu/strength-test/index");
			},
			handleStudent() {
				this.$tab.navigateTo("/pages/puyu/student/index");
			},
			handleCoach() {
				this.$tab.navigateTo("/pages/puyu/coach/index");
			},
			handleLesson() {
				this.$tab.navigateTo("/pages/puyu/lesson/summary");
			},
			handleMemberIntegral() {
				this.$tab.navigateTo("/pages/puyu/member-integral/index");
			},
			handleIntegral() {
				this.$tab.navigateTo("/pages/puyu/integral/index");
			},
			handleIntegralSort() {
				this.$tab.navigateTo("/pages/puyu/member-integral/sort-member-integral");
			},
			handleNews() {
				this.$tab.navigateTo("/pages/puyu/news/news");
			},
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		height: 100vh;
		background: linear-gradient(to bottom, #0066cc, #c3d1eb);
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.horizontal-line {
		height: 10rpx;
		background-color: #993399;
		/* float:right;
	width: 100%;
	height: 5px;
	margin-top: -0.5em;
	background:#993399;
	position: relative;
	text-align: center; */
		/* 设置边框样式，可以修改颜色和宽度 */
		/* border-top: 1px solid #993399; */
		/* 设置上下外边距，可以根据需要调整 */
		margin: 10px 0;
	}

	.line {
		align-items: center;
		width: 90%;
		/* 横线的宽度 */
		height: 3px;
		/* 横线的高度 */
		background-color: #993399;
		/* 横线的颜色 */
		margin: 10px 0;
		/* 横线的上下外边距 */
	}

	.menu {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 10rpx 0;
	}

	.menu-item {
		width: 600rpx;
		margin: 10rpx 0;
		align-items: center;
		justify-content: center;
		/* background-color: #993399; */
		font-weight: bolder;
	}

	.menu-item-box {
		width: 250rpx;
		margin: 10rpx;
		background-color: #993399;
		color: white;
	}


	.slogan {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* position: fixed; */
		margin: 40rpx 0;
		width: 100%;
	}

	.slogan-name {
		color: #993399;
		font-size: 40rpx;
		font-weight: bolder;
	}

	.slogan-style {
		color: #993399;
		font-size: 40rpx;
		font-weight: bolder;
		font-style: italic;
	}
</style>